body.mobile과 body.desktop으로 화면 유형을 구분합니다.
body.mobile #root-widget {
/* 모바일 화면에 적용할 스타일 */
}
body.desktop #root-widget {
/* 데스크톱 화면에 적용할 스타일 */
}모바일의 태블릿 배치는 미디어 쿼리로 구분합니다.
@media (max-width: 991px) {
#launcher-pane {
/* 모바일 배치에 적용할 스타일 */
}
}
@media (min-width: 992px) {
#launcher-pane {
/* 태블릿과 데스크톱 배치에 적용할 스타일 */
}
}세로 배치에서는 실행 도구 모음이 왼쪽에 있습니다. 가로 배치에서는 위쪽에 있고 탭이 전체 너비를 사용합니다. body의 클래스로 구분합니다.
body.layout-vertical #left-pane {
/* 세로 배치에 적용할 스타일 */
}
body.layout-horizontal #center-pane {
/* 가로 배치에 적용할 스타일 */
}#horizontal-main-container와 #vertical-main-container는 선택한 배치와 관계없이 DOM에 존재합니다. 해당 컨테이너로 본문 영역의 배경을 꾸밀 수 있습니다.
Windows에는 body.platform-win32를 사용하고 macOS에는 body.platform-darwin을 사용합니다. Electron 데스크톱 앱에만 적용하려면 다음과 같이 작성합니다.
body.electron {
background: blue;
}시스템 제목 표시줄 사용 여부도 body에서 구분합니다.
body.electron.native-titlebar {
/* 시스템 제목 표시줄에 적용할 스타일 */
}
body.electron:not(.native-titlebar) {
/* 사용자 제목 표시줄에 적용할 스타일 */
}시스템 제목 표시줄을 끈 상태에서도 운영체제의 창 버튼을 사용할 수 있습니다. 구현 과정과 화면은 시스템 창 버튼 구현 기록을 참고하세요.
Windows에서 버튼 영역의 글자색과 배경색은 RGB 16진수 값으로 지정합니다.
body {
--native-titlebar-foreground: #ffffff;
--native-titlebar-background: #ff0000;
}RGBA 값으로 투명도를 지정할 수도 있습니다. 이 경우 마우스를 올렸을 때의 색 표현이 제한될 수 있습니다.
body {
--native-titlebar-background: #ff0000aa;
}값은 창을 만들 때 읽으며 이후에는 밝은 모드와 어두운 모드 설정이 바뀔 때 갱신됩니다.
macOS에서는 시스템 제목 표시줄을 끄면 신호등 모양의 창 버튼이 기본으로 나타납니다. 위치는 다음과 같이 조정합니다.
body {
--native-titlebar-darwin-x-offset: 12;
--native-titlebar-darwin-y-offset: 14 !important;
}Windows 11에서 body의 --background-material로 배경 효과를 설정합니다.
body.electron.platform-win32 {
--background-material: tabbed;
}tabbed는 가로 배치에 적합하고 mica는 세로 배치에 적합합니다. 효과가 보이려면 상위 요소부터 하위 요소까지 배경을 투명하거나 반투명하게 해야 합니다. TriliumNext 테마를 참고하세요.
작업 공간 아이콘 대신 노트 아이콘을 표시하려면 다음 변수를 설정합니다.
:root {
--tab-note-icons: true;
}탭에서 작업 공간을 확대해 보고 있을 때 해당 작업 공간의 색을 가져올 수 있습니다. 다음 예제는 탭 전체 대신 위쪽의 가는 선에 색을 적용합니다.
.note-tab .note-tab-wrapper {
--tab-background-color: initial !important;
}
.note-tab .note-tab-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--workspace-tab-background-color);
}사용자 리소스 제공자를 사용합니다. 글꼴을 가져와 #customResourceProvider=fonts/myfont.ttf를 지정하고 CSS에서 /custom/fonts/myfont.ttf로 참조합니다. 서버가 루트 경로가 아닌 곳에서 실행된다면 ../../../custom/fonts/myfont.ttf를 사용합니다.
밝은 테마는 다음과 같이 선언합니다. 어두운 테마는 값을 dark로 지정합니다.
:root {
--theme-style: light;
}prefers-color-scheme에 따라 자동 전환하는 테마는 현재 모드의 --theme-style과 함께 다음 변수도 지정합니다.
:root {
--theme-style-auto: true;
}Electron 앱이 운영체제에 색상 모드를 전달할 때 사용하는 정보입니다. Windows의 배경 효과 등에도 영향을 줍니다.